<template>
    <div class="form">
        <div class="input">
            <div>姓名：</div>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
            <el-button type="primary" @click="find">查询</el-button>
            <el-button type="primary" @click="clear">重置</el-button>
        </div>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column
            fixed
            prop="name"
            label="姓名"
            width="150">
            </el-table-column>
            <el-table-column
            prop="num"
            label="工号"
            width="120">
            </el-table-column>
            <el-table-column
            prop="tel"
            label="手机号"
            width="120">
            </el-table-column>
            <el-table-column
            prop="product"
            label="产品名称"
            width="120">
            </el-table-column>
            <el-table-column
            prop="level"
            label="技能等级"
            width="300">
            </el-table-column>
            <el-table-column
            prop="type"
            label="用户类型"
            width="120">
            </el-table-column>
            <el-table-column
            label="操作"
            width="100">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    methods: {
      handleClick(row) {
        console.log(row)
      },
      clear() {
        this.input = ''
      },
      find(val) {
        this.tableData.find(v=>v.name === val)
      },
      del(row) {
        // this.tableData.splice(row,1)
        // console.log(row)
      }
    },

    data() {
      return {
        input:'',
        dialog:false,
        tableData: [
            {
            num: '7652101',
            name: '王小虎',
            tel: '18086667777',
            product: '------',
            level: '一级',
            type: '高级'
            },
            {
            num: '7652101',
            name: '王小明',
            tel: '18086668888',
            product: '------',
            level: '三级',
            type: '专家'
            },
            {
            num: '7652101',
            name: '王小红',
            tel: '18086669999',
            product: '------',
            level: '五级',
            type: '工程师'
            },

        ]
      }
    }
  }
</script>

<style lang="scss" scoped>
.form{
    width: 1200px;
    min-height: 300px;
    margin: 0 auto;
}
.input{
    margin: 10px 10px;
    height: 50px;
    line-height: 50px;
    display: flex;
    .el-input{
        width: 200px;
        margin-right: 20px;
    }
}
.el-table{
text-align: center;
}
</style>